<!DOCTYPE html>
<html lang="zh">
<head> 
  <meta charset="UTF-8">
  <title>Aurora - 场景展示</title>
  <style>
    #components-layout-demo-top-side-2 .logo {
      width: 120px;
      height: 31px;
      background: rgba(255, 255, 255, 0.2);
      margin: 16px 28px 16px 0;
      float: left;
    }
  </style>
  <!-- <link href="https://cdnjs.cloudflare.com/ajax/..."> -->
  <link href="http://cdn.staticfile.org/ant-design-vue/1.5.3/antd.min.css" rel="stylesheet">
</head> 
<body>
  <script src="http://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
  <script src="http://cdn.staticfile.org/ant-design-vue/1.5.3/antd.min.js"></script>
  <!-- <script src="/_lib/_dll_antd.js"></script> -->
  <div id="root" style="min-height: 100%;">
    <template>
      <a-layout id="components-layout-demo-top-side-2" style="min-height: -webkit-fill-available;">
        <topnav current-url="/aurora/gallery"> </topnav>

        <a-layout style="padding: 15px 24px 24px;max-width: 1200px;min-width: 800px;margin: auto;width: 100%;">
          <a-layout-content
            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">

            <!-- 片头 -->
            <a-page-header
              style="border: 1px solid rgb(235, 237, 240); margin-bottom: 30px;"
              title="场景展示"
              :sub-title="subtitle"
            >
              <template slot="extra">
                <a-button key="1" type="primary" :loading="loading" @click="refresh">刷新</a-button>
              </template>
              <a-input placeholder="查询" allow-clear v-model.trim="find"></a-input>

              <!-- 标签 -->
              <br/><br/>
              <a-tag style="margin-bottom: 6px;"
                  :color="selectTag==null?'#108ee9':'blue'"
                  @click="actTagSelect(null)">全部</a-tag>
              <a-tag style="margin-bottom: 6px;"
                  :color="selectTag==tag?'#87d068':'green'"
                  @click="actTagSelect(tag)"
                  v-for="tag in tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-page-header>

            <!-- 列表 -->
            <a-list :style="{minHeight: '350px'}" item-layout="horizontal" :data-source="filterScenes">
              <div
                v-if="showLoadingMore"
                slot="loadMore"
                :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
              >
                <a-spin v-if="loadingMore" ></a-spin>
                <!-- <a-button v-else @click="onLoadMore">loading more</a-button> -->
              </div>
              <a-list-item slot="renderItem" slot-scope="scene, id" :row-key="scene.id.toString()">
                <a slot="actions" :href="defaultLink(scene)" target="_blank">查看</a>
                <a slot="actions" @click="actModalCreate(scene)">创建链接</a>
                <a-list-item-meta>
                  <span slot="title">
                    <b>{{ scene.title }}</b>
                    <i>&emsp;&emsp;{{ scene.series }}/{{ scene.scene }}</i>
                  </span>
                  <img
                    :style="{width:'192px'}"
                    slot="avatar"
                    :src="scene.avatar"
                  />
                  <span slot="description">
                    <p>{{ scene.desc }}</p>
                    <a-tag style="margin-bottom: 6px;" color="orange" v-for="tag in scene.tags" :key="tag">{{tag}}</a-tag>
                  </span>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
            <!-- 模态框 -->
            <a-modal :title="modalTitle" v-model="modalVisible" @cancel="actModalClose" @ok="actModalClose"
                cancel-text="关闭" ok-text="确认" :style="{width: '80%', maxWidth: '800px'}"
            >
              <p>请为你的场景起一个名字，以便在后台能够找到它。</p>
              <a-input placeholder="起个名字" allow-clear v-model.trim="modalName"></a-input>
              <br><br>
              <p>
                <b>链接如下：</b>（下面这串链接可以直接复制到 OBS 的 url 下）
                <a-button type="link" @click="copyLink">复制链接</a-button>
              </p>
              <p>
                <span ref="mylink">{{modalLink}}</span>
              </p>
              <br>
              <p><b>该场景建议设置大小为：</b></p>
              <p>宽度范围&emsp;&emsp;{{ modalSceneWidth }}</p>
              <p>高度范围&emsp;&emsp;{{ modalSceneHeight }}</p>

              <span>
                <span v-if="!showAdvOpt">
                  <a-button type="link" @click="actAdvOpt">高级选项</a-button>
                </span>
                <span v-if="showAdvOpt">
                  <p>每个场景在加载启动时让它以特定的配置启动, 比如弹幕姬启动时默认连接某个特定的直播间. 写法我看看怎么补</p>
                  <a-input placeholder="启动选项" allow-clear v-model.trim="bootParam"></a-input>
                </span>
              </span>

            </a-modal>

            <!-- Aurora END -->

          </a-layout-content>
        </a-layout>
      </a-layout>
    </template>
  </div>
</body>
</html>